<form id="edit-form" class="form-horizontal temp-form" role="form" data-toggle="validator" method="POST" action="">
    
    <div class="form-group">
        <label for="c-name" class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name?:''}">
        </div>
    </div>
    <div class="form-group">
        <label for="c-type" class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select  id="c-type" v-model="type" data-rule="required" class="form-control selectpicker" name="row[type]">
                {foreach name="typeList" item="vo"}
                <option value="{$key}">{$vo}</option>
                {/foreach}
            </select>
        
        </div>
    </div>
    
    <div class="form-group">
        <table class="table table-hover table-bordered">
            <tr class="alert-success" v-if="type == 1">
                <th>地区</th>
                <th>首件</th>
                <th>首费</th>
                <th>续件</th>
                <th>续费</th>
                <th>操作 <a href="" class="btn btn-warning btn-xs" @click.prevent="addItems()">添加一行</a></th>
            </tr>
            <tr class="alert-success" v-else>
                <th>地区</th>
                <th>首重(g)</th>
                <th>首费</th>
                <th>续重(g)</th>
                <th>续费</th>
                <th>操作 <a href="" class="btn btn-warning btn-xs" @click.prevent="addItems()">添加一行</a></th>
            </tr>
            
            <tr v-for="(item, index) in items">
                <input type="hidden" :name="'items['+index+'][id]'" :value="item.id">
                <input type="hidden" :name="'items['+index+'][area_ids]'" :value="item.area_ids.toString()">
                <input type="hidden" :name="'items['+index+'][area_names]'" :value="item.area_names.toString()">
                <td>
                    <p>{{item.area_names.toString()}}</p>
                    <a href="" @click.prevent="showProvince(index)" class="btn btn-xs btn-default">添加地区</a>
                </td>
                <td><input type="text" :name="'items['+index+'][first]'" class="form-control" v-model="item.first"></td>
                <td><input type="text" :name="'items['+index+'][amount]'" class="form-control" v-model="item.amount"></td>
                <td><input type="text" :name="'items['+index+'][add]'" class="form-control" v-model="item.add"></td>
                <td><input type="text" :name="'items['+index+'][add_amount]'" class="form-control" v-model="item.add_amount"></td>
                <td>
                    <a href="" @click.prevent="delItem(index)" class="btn btn-xs btn-danger">删除</a>
                </td>
            </tr>
        
        </table>
    
    </div>
    
    
    <div class="form-group">
        <label for="c-is_free" class="control-label col-xs-12 col-sm-2">{:__('Is_free')}:</label>
        <div class="col-xs-12 col-sm-8">
            
            <select  id="c-is_free" data-rule="required" v-model="is_free" class="form-control selectpicker" name="row[is_free]">
                {foreach name="isFreeList" item="vo"}
                <option value="{$key}" >{$vo}</option>
                {/foreach}
            </select>
        
        </div>
    </div>
    <div class="form-group">
        <label for="c-condition_free" class="control-label col-xs-12 col-sm-2">{:__('Condition_free')}:</label>
        <div class="col-xs-12 col-sm-8">
            
            <select  id="c-condition_free" v-model="condition_free" class="form-control selectpicker" name="row[condition_free]">
                {foreach name="conditionFreeList" item="vo"}
                <option value="{$key}" >{$vo}</option>
                {/foreach}
            </select>
        
        </div>
    </div>
    
    <div class="form-group"></div>
    <div class="form-group"></div>
    <div class="form-group" v-if="condition_free == 1">
        <table class="table table-bordered">
            <tr class="alert-success">
                <th>地区</th>
                <th>最少金额</th>
                <th>关系</th>
                <th>最多重量(g)</th>
                <th>操作 <a href="" class="btn btn-warning btn-xs" @click.prevent="addConditions()">添加一行</a></th>
            </tr>
            <tbody v-for="(condition,index) in conditions">
            <tr>
                <input type="hidden" :name="'conditions['+index+'][id]'" :value="condition.id">
                <input type="hidden" :name="'conditions['+index+'][area_ids]'" :value="condition.area_ids.toString()">
                <input type="hidden" :name="'conditions['+index+'][area_names]'" :value="condition.area_names.toString()">
                <td>
                    <p>{{condition.area_names.toString()}}</p>
                    <a href="" @click.prevent="conditionShowProvince(index)" class="btn btn-xs btn-default">添加地区</a>
                </td>
                <td><input type="text" :name="'conditions['+index+'][amount]'" class="form-control" v-model="condition.amount"></td>
                <td>
                    <select :name="'conditions['+index+'][logic]'" id="" v-model="condition.logic" class="form-control">
                        <option value="1">且</option>
                        <option value="2">或</option>
                    </select>
                </td>
                <td><input type="text" :name="'conditions['+index+'][weight]'" class="form-control" v-model="condition.weight"></td>
                <td>
                    <a href="" @click.prevent="prevent(index)" class="btn btn-xs btn-danger">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    
    <div class="province-div col-xs-12" v-if="provinceStatus">
        <div class="form-group">
            <div class="col-xs-3" v-for="pro in provinces">
                <label :for="'province_'+pro.id" class="checkbox-inline" >
                    <input type="checkbox" class="province" name="" :id="'province_'+pro.id" @click="selectProvince(pro.id,pro.areaname)"> {{pro.areaname}}
                </label>
            </div>
        </div>
        <div class="close-btn" @click="provinceStatus = false">关闭</div>
    </div>
    
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>


</form>

<style>
    .province-div{
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 5;
        padding: 20px;
    }
    
    .province-div .form-group{
        background: rgba(255,255,255,0.7);
        width: 80%;
        padding: 20px;
        margin: 0 auto;
        
    }
    
    .province-div .close-btn{
        background: #128f76;
        color:#fff;
        line-height: 40px;
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }
</style>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="/assets/js/vue/vue-resource.js"></script>

<script>
    var tempVue = new Vue({
        el:'.temp-form',
        data:{
            type:{$row['type']?:1},
            is_free:{$row['is_free']?:0},
            condition_free:{$row['condition_free']?:0},
            is_area:{$row['is_area']?:0},
            provinces:{$provinces},
            provinceStatus:false,
            conditionIndex: 0,
            proIndex : 0,
            items:{$items},
            conditions:{$conditions},
            provinceType: 'items',
        },
        mounted:function(){

        },
        methods:{
            //显示选择省份
            showProvince: function(index){
                this.proIndex = index;
                this.provinceStatus = true;
                this.provinceType = 'items';
                $('.province').attr('checked', false);
            },
            //选择省份
            selectProvince: function(pid,pname){
                // console.log(pindex)
                // console.log(this.provinceList[pindex]);

                if(this.provinceType == 'items'){
                    var pindex = this.proIndex;
                    this.items[pindex]['area_ids'].push(pid);
                    this.items[pindex]['area_names'].push(pname);
                } else {
                    var pindex = this.conditionIndex;
                    console.log(pindex);
                    this.conditions[pindex]['area_ids'].push(pid);
                    this.conditions[pindex]['area_names'].push(pname);
                }
                console.log(this.items);
            },
            //条件显示省份
            conditionShowProvince: function(index) {
                this.conditionIndex = index;
                this.provinceStatus = true;
                this.provinceType = 'conditions';
                $('.province').attr('checked', false);
            },
            //添加一行运费公式
            addItems: function(){
                this.items.push({"id":"","area_ids":[], "area_names":[], "first":0,"amount":"0","add":0,"add_amount":0});
            },
            //添加一行条件
            addConditions: function(){
                this.conditions.push({id:'', area_ids:[], "area_names":[], amount:0, logic:1, weight:0});
            },
            delItem: function(index){
                this.items.splice(index,1);
            },
            prevent: function(index){
                this.conditions.splice(index,1);
            }
        }
    });
</script>
